<script setup lang='ts'>
import {ref} from 'vue'

const style={
  width:'30px',
  height:'30px',
}
const isFull=ref(false)
const emits=defineEmits(['toggle'])

const handleToggle=()=>{
  isFull.value=!isFull.value
  emits('toggle',isFull.value)
}
</script>

<template>
<div @click="handleToggle" style="margin: 0 20px;cursor: pointer;" class="screen-full-toggle-icon">
  <my-icon v-if="isFull"  name="cancelScreenFull" v-bind="style" />
  <my-icon v-else name="screenFull" v-bind="style" />
</div>
</template>

<style scoped>

</style>

<style lang="scss">
.is-fullscreen {
  .el-dialog__footer{
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
  }
  
 
}
</style>